import React from 'react';
import { Row, Col, Tooltip, Button, Table, message } from 'antd';
import List from './list';
import CommonListsIndex from 'src/components/CommonLists/index';
import FilterTool from 'src/components/FilterTool';
import services from 'src/services/api';
import Modal from '../../../components/Modal/index';
import ChallengeStatistics from '../../Strategy/Strategy/challengeStatistics';

import './index.less'

class Produce extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'produce';
    this.listsComponent = List;
    this.detailComponent = '/produce/produce/id/detail';
  }
  componentDidMount() {
    this.getAppCodeList();
    this.getProductCodeList();
  }

  // 详情
  showDetail = (record) => {
    this.props.history.push(this.replaceUrlForId(this.detailComponent, this.getOpenParam(record)));
  };

  // 打开新窗口、页面的id
  getOpenParam = (record) => {
    return record.strategy_id;
  };

  // 下线
  offfline = (record) => {
    let params = {
      strategy_id: record.strategy_id,
    }
    services.produce.offfline(params).then(res => {
      if (res.code === 0) {
        message.success(res.msg)
      } else {
        message.error(res.msg)
      }
    })
  }

  // 冠军挑战
  championChallenge = (record) => {
    Modal.open({
      title: '冠军挑战结果对比',
      width: '1000px',
      content: <ChallengeStatistics strategy_id={record.strategy_id} api='produce' />,
      isOkBtn: true,
      isCancelBtn: true,
      ok: () => {
        Modal.close();
      },
      cancel: () => {
        Modal.close();
      },
    });
  }

  // 表列定义
  getColumns = () => {
    return [
      {
        title: (
          <>
            {this.getFilterTitle(
              '所属渠道',
              this.state.applications,
              'app_id',
              this.refreshTableFilterWithAppV2.bind(this, 'app_id'),
              ['app_id', 'app_name']
            )}
          </>
        ),
        dataIndex: 'app_name',
        key: 'app_name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle(
              '关联产品',
              this.state.products,
              'product_id',
              this.refreshTableFilterWithAppV2.bind(this, 'product_id'),
              ['product_id', 'product_name']
            )}
          </>
        ),
        dataIndex: 'product_name',
        key: 'product_name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle(
              '关联事件',
              this.state.events,
              'event_id',
              this.refreshTableFilterWithAppV2.bind(this, 'event_id'),
              ['event_id', 'event_name']
            )}
          </>
        ),
        dataIndex: 'event_name',
        key: 'event_name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '更新时间',
        key: 'update_time',
        dataIndex: 'update_time',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
    ];
  };

  expandedRowRender = (topRecord) => {
    const columns = [
      {
        title: '策略名称',
        key: 'name',
        dataIndex: 'name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className="overflowtext">
                <Button type='link' onClick={() => this.showDetail(record)}>
                  {text}
                </Button>
              </div>
            </Tooltip>
          );
        },
      },
      {
        title: '版本',
        key: 'version',
        dataIndex: 'version',
        ellipsis: true,
        render: (text, record) => {
          return (
            'V' + text
          );
        },
      },
      {
        title: '运行开始时间',
        key: 'effective_time',
        dataIndex: 'effective_time',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '流量分配',
        key: 'sample_rate',
        dataIndex: 'sample_rate',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text > 0 && text + '%'} placement='topLeft'>
              {text > 0 && text + '%'}
            </Tooltip>
          );
        },
      },
      {
        title: '运行状态',
        key: 'status',
        dataIndex: 'status',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text === 1 ? '已运行' : (text === 4 ? '待运行' : '')} placement='topLeft'>
              {text === 1 ? '已运行' : (text === 4 ? '待运行' : '')}
            </Tooltip>
          );
        },
      },
      {
        title: '发布人/审核人',
        key: 'create_audit',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={record.create_user_name + '/' + record.audit_user_name} placement='topLeft'>
              {record.create_user_name + '/' + record.audit_user_name}
            </Tooltip>
          );
        },
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => {
          return <div className='table-action'>
            <span>
              <Button size='small' type='link' onClick={this.offfline.bind(this, record)}>下线</Button>
            </span>
            <span>
              <Button size='small' type='link' onClick={this.championChallenge.bind(this, record)} disabled={!record.strategy_challenger_id}>冠军挑战</Button>
            </span>
          </div>
        }
      }
    ];

    return <Table columns={columns} dataSource={topRecord.publish_list} pagination={false} className='fixed' rowKey='strategy_id' />;
  }

  render() {
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入策略名称进行搜索',
      },
    ];
    return (
      <div>
        <Row type='flex' justify='space-between' align='middle'>
          <Col span={24}>
            <FilterTool
              data={data}
              colNum={1}
              query={this.freshQueryList}
              refreshFilter={this.refreshFilter}
              isOnChange={true}
              refresh={this.resetList}
              justify='end'
            />
          </Col>
        </Row>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.state}
            {...this.props}
            queryList={this.freshQueryList}
            refreshTableFilter={this.refreshTableFilter}
            onChangePagination={this.onChangePagination}
            queryTableParams={this.queryTableParams}
            rowKey='event_id'
            columns={this.getColumns()}
            expandedRowRender={this.expandedRowRender}
          />
        </div>
      </div>
    );
  }
}

export default Produce;
